﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyAB-CtEPp8jb5IASFYFGlW14sJzqmzPakI"
        type="text/javascript"></script>
    <script src="../../Scripts/elabel.js" type="text/javascript"></script>
    <script type="text/javascript">

        var map;
        var geocoder;
        var address;

        var map2;
        var geocoder2;
        var address2;

        function initialize() {
            map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(@ViewBag.trackLogList[0].LATITUDE, @ViewBag.trackLogList[0].LONGTITUDE ), 16);
            map.setUIToDefault();
            geocoder = new GClientGeocoder();

           
            var ArrayPoint = new Array();
            var ArrayComment = new Array();


            @{
                int count = 0;
                string CommandJavaScript_POINTARRAY = "";
                string CoomandJavaScript_COMMENTARRAY = "";
            }

             @foreach (DeviceFinder.Models.TRACKLOG trackLog in ViewBag.trackLogList)
             {

                 CommandJavaScript_POINTARRAY += "ArrayPoint[" + count.ToString() + "] = new GLatLng(" + trackLog.LATITUDE + ", " + trackLog.LONGTITUDE + ");";
                 CoomandJavaScript_COMMENTARRAY += "ArrayComment[" + count.ToString() + "] = \"" + trackLog.TIMELOG + "\"; ";
                 count++;
             }

             @{
                 
             }
             @Html.Raw(CoomandJavaScript_COMMENTARRAY)
             @CommandJavaScript_POINTARRAY
             

            
            
            for(var i= ArrayPoint.length -1  ; i >= 0 ; i--)
            {
                point = ArrayPoint[i];
                marker = new GMarker(point);
                map.addOverlay(marker);

                // Elabel here http://econym.org.uk/gmap/elabel.htm
                var eLabel = new ELabel(ArrayPoint[i], '<div style="color:Yellow; width:170px; background-image:url(\'../../Content/themes/base/images/Black-Glass-Deep.png\');"><b> ' + ArrayComment[i] + '</b></div>');
                map.addOverlay(eLabel);
            }


            
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 100%; height: 600px;">
    </div>
</body>
</html>
